<template>
  <div class="cart">
    <div class="header">购物车</div>
    <div class="goods-list">
      <div
        class="goods-list-item"
        v-for="(item, index) in goods"
        :key="item.id"
      >
        <input class="check" type="checkbox" name="" v-model="item.it" id="" />
        <div class="img"><img :src="item.img" alt="" /></div>
        <div class="info">
          <div class="title">{{ item.title }}</div>

          <div class="desc">{{ item.desc }}</div>

          <div class="price">单价:{{ item.price }}</div>
        </div>
        <div class="num">
          <span class="add" @click="reduce(index)">-</span>
          <input type="text" v-model="item.num" />
          <span class="reduce" @click="add(index)">+</span>
        </div>
        <div class="del" @click="del(index)">删除</div>
        <div @click="tianjia(item.id)" class="sc">
          <!-- <router-link to="/woDe"> -->
          收藏
          <!-- </router-link> -->
        </div>
      </div>
    </div>
    <div class="total-price">合计:￥{{ getTotal }}</div>

    <!-- <collect></collect> -->
  </div>
</template>

<script>
// import collect from "../components/CollectGood.vue";
export default {
  name: "cart",
  data() {
    return {
      totalPrice: 0,
      goods: [
        {
          id: "0",
          title: "螺蛳粉",
          img: "https://img2.baidu.com/it/u=2587361840,1464385345&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=408",
          price: 22,
          desc: "好吃的螺蛳粉",
          num: 1,
          it:false
        },
        {
          id: "1",
          title: "烤羊肉",
          img: "https://img0.baidu.com/it/u=1510357846,1090925715&fm=253&fmt=auto&app=138&f=JPEG?w=488&h=398",
          price: 1500,
          desc: "沸羊羊你吃饭怎么可以这么粗鲁",
          num: 1,
          it:false
        },
      ],
    };
  },
  methods: {
    tianjia(a) {
      //   判断本地储存
      if (typeof localStorage.shuJu == "undefined") {
        let arr = [];
        arr.push(this.goods[a]);
        localStorage.setItem("shuJu", JSON.stringify(arr));

        console.log("没有");


      } else {
          
        console.log("有");

        let kda = JSON.parse(localStorage.getItem("shuJu"));

 
          kda.push(this.goods[a]);

          let obj = {};
          kda = kda.reduce(function(item, next) {
          obj[next.id] ? '' : obj[next.id] = true && item.push(next);
          return item;
          }, []);
          console.log(kda);
           
           localStorage.setItem("shuJu", JSON.stringify(kda));
            

      }
    },
    add(a) {
      console.log(a);
      this.goods[a].num++;
      // console.log(  this.goods[a].num);
    },
    reduce(a) {
      console.log(a);
      this.goods[a].num--;
      if (this.goods[a].num == 0) {
        let shang = confirm("删除改商品吗");
        if (shang) {
          this.goods.splice(a, 1);
        } else {
          this.goods[a].num = 1;
        }
      }
    },
    del(a) {
      console.log(a);
      this.goods.splice(a, 1);
    },
  },
  filters: {},
  computed: {
    getTotal() {
      // console.log(this.goods);
      let aa = 0;
      for (let i = 0; i < this.goods.length; i++) {
        if(this.goods[i].it == true){

          this.totalPrice = this.goods[i].num * this.goods[i].price;
          aa += this.totalPrice;
        //  console.log(this.goods[i]);
        }
      }
      //  console.log(aa);
      return aa;
    },
  },
  watch: {},
  components: {
    // collect,
  },
};
</script>
<style lang="less">
.cart {
  width: 100%;
  margin: 0 auto;
  .header {
    width: 100%;
    height: 50px;
    background: #f3f3f3;
    color: red;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
  }
  .total-price {
    width: 100%;
    height: 50px;
    position: fixed;
    // bottom: 0;
    left: 0;
    background: #f3f3f3;
    color: red;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    font-weight: 800;
  }

  .goods-list {
    .goods-list-item {
      width: 100%;
      height: 110px;
      position: relative;
      .check {
        float: right;
      }
      .del {
        width: 29px;
        height: 50px;
        font-size: 12px;
        color: #333;
        float: right;
        margin: 0 0 0 0;
      }
      .sc{
        font-size: 15px;
      }
      .img {
        width: 100px;
        height: 100px;
        float: left;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        float: left;
        margin-left: 10px;
        .title {
          font-size: 18px;
          font-weight: 800;
          width: 200px;
          margin-top: 10px;
        }

        .desc {
          font-size: 12px;
          margin-top: 10px;
          color: #666;
        }
        .price {
          font-size: 12px;
          margin-top: 10px;
          color: #666;
        }
      }
      .num {
        position: absolute;
        right: 0px;
        bottom: 20px;
        input[type="text"] {
          width: 20px;
          padding-left: 5px;
        }
        span {
          width: 20px;
          height: 20px;
          display: inline-block;
          line-height: 20px;
          text-align: center;
        }
      }
    }
  }
}
</style>
